<template>
  <div class="contact">
    <van-nav-bar :fixed="true" left-arrow @click-right="onClickRight">
      <template #left>
        <span>通讯录</span>
      </template>
      <template #right>
        <van-icon name="search" size="18" color="#000000" />
      </template>
    </van-nav-bar>

    <div class="conter">
      <van-row @click="toFriendRequest">
        <van-col span="5" class="item-box">
          <div class="img-box" style="background-color: #2db7f5">
            <van-icon name="bell" class="i-box" size="20" />
          </div>
        </van-col>
        <van-col span="19" class="item-box">
          <van-row>
            <van-col span="20">
              <div class="text-box van-hairline--bottom">新的朋友</div>
            </van-col>
            <van-col span="4" class="item-num-col">
              <div class="item-num" v-if="getReqFriendNum > 0">{{getReqFriendNum}}</div>
            </van-col>
          </van-row>
        </van-col>
      </van-row>
      <van-row @click="toFriend">
        <van-col span="5" class="item-box">
          <div class="img-box" style="background-color: #19be6b">
            <van-icon name="friends" class="i-box" size="23" />
          </div>
        </van-col>
        <van-col span="19" class="item-box">
          <div class="text-box van-hairline--bottom">添加联系人</div>
        </van-col>
      </van-row>

      <div class="user-list">
        <van-index-bar :index-list="indexList" v-if="contactList.length > 0">
          <div v-for="(users,index) in contactList" :key="index">
            <van-index-anchor :index="indexList[index]" v-if="users.length > 0" />
            <van-cell v-for="(user, u) in users" :key="u" @click="toUser(user.userId)">
              <template #title>
                <van-row>
                  <van-col span="5" class="user-item-box">
                    <div class="user-item-img">
                      <van-image
                        width="40px"
                        height="40px"
                        fit="fill"
                        radius="5"
                        :src="user.userImg"
                      />
                    </div>
                  </van-col>
                  <van-col span="19" class="user-item-box">
                    <div class="user-item-text">{{user.userName}}</div>
                  </van-col>
                </van-row>
              </template>
            </van-cell>
          </div>
        </van-index-bar>
      </div>
    </div>

    <Menu />
  </div>
</template>

<script>
import Menu from "../components/Menu";
import pinyin from "js-pinyin";
import { mapState, mapActions, mapGetters } from "vuex";

export default {
  name: "Contact",
  components: {
    Menu
  },
  data() {
    return {
      indexList: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z",
        "#"
      ]
    };
  },
  created() {
    //获取好友列表
    this.getFriends();

    //获取好友请求列表
    this.getReqFriends();
  },
  methods: {
    ...mapActions(["asyncSaveContactList", "asyncSaveRequest"]),
    onClickRight() {
      this.$router.push("/friend");
    },
    //获取首字母大写
    getFirstLetter(character) {
      return pinyin
        .getCamelChars(character)
        .substr(0, 1)
        .toUpperCase();
    },
    //获取索引类型位置
    getIndexBar(chart) {
      let num = this.indexList.length - 1;
      this.indexList.forEach((item, index) => {
        if (item == chart) {
          num = index;
        }
      });
      //未找到分类的都视为#类型
      return num;
    },
    toFriend() {
      this.$router.push("/friend");
    },
    toFriendRequest() {
      this.$router.push("/friendRequest");
    },
    //获取好友
    getFriends() {
      let contactList = [
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        []
      ];
      this.axios
        .get(this.server.BaseUrl + "/friends/" + this.user.userId)
        .then(res => {
          if (res.data.status) {
            let userList = res.data.data;
            userList.forEach(item => {
              let firstChart = this.getFirstLetter(item.userName);
              let index = this.getIndexBar(firstChart);
              contactList[index].push(item);
            });
            this.asyncSaveContactList(contactList);
          } else {
            if (
              res.data.code == "4001" ||
              res.data.code == "4002" ||
              res.data.code == "4003"
            ) {
              this.$dialog
                .alert({
                  title: "登录过期",
                  message: res.data.message,
                  confirmButtonText: "重新登录"
                })
                .then(() => {
                  localStorage.removeItem("token");
                  this.$router.push("/login");
                });
            } else {
              this.$dialog
                .alert({
                  title: "服务异常",
                  message: "服务维护中,请稍后重试!"
                })
                .then(() => {
                  console.log(res.data.message);
                });
            }
          }
        })
        .catch(err => {
          this.$dialog
            .alert({
              title: "网络错误",
              message: "服务维护中,请稍后重试!"
            })
            .then(() => {
              console.log(err);
            });
        });
    },
    getReqFriends() {
      this.axios
        .get(this.server.BaseUrl + "/getReqFriends" + "/" + this.user.userId)
        .then(res => {
          if (res.data.status) {
            this.asyncSaveRequest(res.data.data);
          } else {
            this.$toast(res.data.message);
          }
        })
        .catch(err => {
          this.$toast("网络异常");
          console.log(err);
        });
    },
    toUser(userId) {
      this.$router.push({ path: "/user", query: { userId: userId } });
    }
  },
  computed: {
    ...mapState(["user", "requestFriend", "contactList"]),
    ...mapGetters(["getReqFriendNum"])
  }
};
</script>

<style lang="scss" scoped>
.contact {
  width: 100%;
  background-color: #f8f8f9;

  .van-nav-bar {
    background-color: #f8f8f9;
  }

  .conter {
    width: 100%;
    margin-top: 46px;
    margin-bottom: 50px;

    .van-row {
      background-color: white;
    }

    .item-box {
      padding: 5px;

      .text-box {
        height: 40px;
        text-align: left;
        line-height: 40px;
      }

      .img-box {
        width: 40px;
        height: 40px;
        border-radius: 5px;
        margin: auto;
        text-align: center;

        .i-box {
          line-height: 40px;
          color: #ffffff;
        }
      }

      .item-num-col {
        height: 40px;
        line-height: 40px;
        .item-num {
          height: 15px;
          width: 15px;
          border-radius: 15px;
          background-color: #ee0a24;
          line-height: 15px;
          text-align: center;
          margin-top: 14px;
          color: #ffffff;
        }
      }
    }

    .user-list {
      margin-top: 10px;
      margin-bottom: 10px;

      .van-cell {
        padding-left: 0;
        padding-right: 0;
        padding-top: 10px;
        padding-bottom: 10px;
      }

      .user-item-box {
        .user-item-img {
          width: 40px;
          height: 40px;
          border-radius: 5px;
          margin: auto;
          text-align: center;
        }

        .user-item-text {
          text-align: left;
          color: black;
          line-height: 40px;
          padding-left: 5px;
        }
      }
    }
  }
}
</style>